<template>
  <div class="login-container">
    <div class="info-box">
      <div class="info-box-left">
        <div
          style="
            color: #fff;
            font-size: 24px;
            padding-left: 70px;
            margin-bottom: 10px;
          "
        >
          Hi！你好！
        </div>
        <div
          style="
            color: #fff;
            font-size: 24px;
            padding-left: 70px;
            margin-bottom: 30px;
          "
        >
          欢迎进入东成B2B数字化采购平台管理系统
        </div>
        <div style="height: 20vw; display: flex; justify-content: center">
          <img
            src="@/assets/imgs/login1.png"
            style="height: 20vw; min-height: 300px; width: 90%"
            alt=""
          />
        </div>
      </div>
      <div class="info-box-right">
        <div style="color: #fff; font-size: 30px; margin-bottom: 20px">
          登录系统
        </div>
        <div style="color: #deeffe; font-size: 20px; margin-bottom: 10px">
          系统账号
        </div>
        <div class="input-item mb-20 flex-row-ycenter">
          <div class="icon flex-row-xy-center">
            <component is="user-outlined" class="c-999"></component>
          </div>
          <input
            v-model="form.account"
            type="text"
            @keydown.enter="
              () => {
                passwordRef.focus();
              }
            "
            placeholder="请输入账号"
          />
        </div>
        <div style="color: #deeffe; font-size: 20px; margin-bottom: 10px">
          账号密码
        </div>
        <div class="input-item flex-row-ycenter">
          <div class="icon flex-row-xy-center">
            <component is="lock-outlined" class="c-999"></component>
          </div>
          <input
            v-model="form.password"
            ref="passwordRef"
            :type="showPass ? 'text' : 'password'"
            placeholder="请输入密码"
            @keydown.enter="submit"
          />
          <component
            @click="showPass = !showPass"
            :is="showPass ? 'eye-outlined' : 'eye-invisible-outlined'"
            class="c-999 view-pass pointer"
          ></component>
        </div>
        <div
          class="commonBtn-primary-login login-btn"
          style="
            width: 100%;
            height: 2.5vw;
            min-height: 36px;
            font-size: 18px;
            margin-top: 50px;
          "
          v-global-loading="loading"
          @click="submit"
        >
          登录
        </div>
      </div>
    </div>
    <a-modal
      v-model:open="visible"
      title="修改密码"
      :closable="false"
      :maskClosable="false"
      :footer="false"
    >
      <a-form :model="formState" ref="formStateRef" :labelCol="{span: 5}">
        <a-form-item
          label="密码"
          name="passwordOld"
          :rules="[{required: true, message: '请填写'}]"
        >
          <a-input-password v-model:value="formState.passwordOld" />
        </a-form-item>
        <a-form-item label="新密码" name="passwordNew" :rules="newrules">
          <a-input-password v-model:value="formState.passwordNew" />
        </a-form-item>
        <a-form-item label="确认密码" name="rePassword" :rules="newrules1">
          <a-input-password v-model:value="formState.rePassword" />
        </a-form-item>
        <p style="padding: 0 12px">
          安全性高的密码可以使帐号更安全。建议您定期更换密码，设置一个包含数字、大写字母、小写字母、特殊字符至少三项且长度8~18位的密码。
        </p>
        <a-form-item :wrapper-col="{offset: 10, span: 16}">
          <a-button type="primary" html-type="submit" @click="handleOk"
            >确认</a-button
          >
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {message, Modal} from "ant-design-vue";
import useUserStore from "@/store/user";
import {encrypt} from "@/utils/encryption";
import {userupdatePwd} from "@/api/configCenter/auth/people";
const visible = ref(false);
const formState: any = ref({});
const passwordRef = ref();
//声明一个form变量，用来存储表单数据
const form = ref({
  account: "",
  password: ""
});
const passReg =
  /^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,18}$/;
//新密码输入框校验
let newrules: any = ref([
  {required: true, message: "请输入", trigger: "change"},
  {
    pattern: passReg,
    message: "格式不正确，请修改您的密码格式",
    trigger: "change"
  }
]);
const cheacknewpassword = (rules, value, callback) => {
  if (value) {
    if (formState.value.passwordNew == formState.value.rePassword) {
      return Promise.resolve();
    } else {
      return Promise.reject("两次密码不一样");
    }
  } else {
    return Promise.reject("请输入");
  }
};
//确认新密码输入框校验
let newrules1: any = ref([
  {required: true, validator: cheacknewpassword, trigger: "change"}
]);
//声明一个loading变量，用来存储加载状态
const loading = ref(false);
//声明一个router变量，用来存储路由
const router = useRouter();
//声明一个showPass变量，用来存储是否显示密码
const showPass = ref(false);
const formStateRef = ref();
//修改密码
const handleOk = () => {
  formStateRef.value.validate().then(() => {
    userupdatePwd(formState.value).then((res) => {
      localStorage.clear();
      visible.value = false;
      form.value.password = "";
      formState.value = {};
      message.success("修改成功，请重新登录");
    });
  });
};
//提交表单
const submit = () => {
  if (!form.value.account) {
    message.error("请输入账号");
    return false;
  }
  if (!form.value.password) {
    message.error("请输入密码");
    return false;
  }
  loading.value = true;

  let data = {
    ...form.value,
    isEncrypt: false
  };
  if (data.isEncrypt) data.password = encrypt(form.value.password);
  useUserStore
    .login(data)
    .then((res) => {
      if (form.value.password == "Dk1q2w3e$") {
        loading.value = false;
        Modal.confirm({
          title: "您当前是系统默认密码,为了您的数据安全请重新设置密码。",
          okText: "立即设置",
          cancelText: "下次再说",
          onOk() {
            visible.value = true;
          },
          onCancel() {
            router.replace("/");
          }
        });
      } else {
        router.replace("/");
        loading.value = false;
      }
    })
    .catch((err) => {
      loading.value = false;
    });
};
</script>

<style lang="less" scoped>
.input-item {
  height: 2.6vw;
  min-height: 40px;
  border: 1px solid #dedede;
  border-radius: 4px;
  overflow: hidden;
  flex-wrap: nowrap;
  font-size: 0.9vw;
  background-color: #fff;
  padding-right: 0.5vw;

  .icon {
    height: 100%;
    width: 2.6vw;
    min-width: 40px;
    background-color: #f1f1f1;
    font-size: 1.3vw;
    flex-shrink: 0;
  }

  input {
    border: none;
    height: 100%;
    padding-left: 10px;
    color: #333333;
    flex: 1;

    &::placeholder {
      color: #cccccc;
      font-size: 0.9vw;
    }
  }
}

.login-container {
  width: 100%;
  height: 100%;
  background-image: url("@/assets/imgs/login.png");
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

  .info-box {
    width: 60vw;
    height: 34vw;
    min-width: 900px;
    min-height: 500px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 6vw;
    display: flex;

    .info-box-left {
      flex: 3;
      background-color: #0180f5;
      padding-top: 5vw;
    }

    .info-box-right {
      flex: 2;
      padding-top: 5vw;
      padding-left: 3vw;
      padding-right: 5vw;
      background-color: rgba(92, 176, 250, 0.4);
    }
  }
}

.commonBtn-primary-login {
  border-radius: 4px;
  font-size: 14px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  cursor: pointer;
  position: relative;
  background-color: #2f88f5;
  color: #fff;

  &:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: none;
    background: #fff;
    border-radius: inherit;
    opacity: 0.1;
    transition: all 0.5s;
    content: "";
    pointer-events: none;
  }

  &:hover {
    &:after {
      display: block;
    }
  }
}
</style>
